<template>
  <div>
    <i-row style="height: 50px;">
      <i-col span="2" style="text-align:center;line-height:32px;font-size:18px;">
        <i-button icon="arrow-left-a" @click="backToWorks">返回</i-button>
      </i-col>
      <i-col span="8" style="text-align:center;line-height:32px;font-size:18px;">
        <b>{{previewStudent.name + " (" + previewDateString + ")"}}</b>
      </i-col>
      <i-col span="4" style="text-align:center;line-height:32px;font-size:18px;">
        <a :href="previewOriginImage" target="_blank">查看原图</a>
      </i-col>
      <i-col span="10" style="text-align:center;">
        <i-button icon="arrow-up-a" @click="handleUp" :disabled="upStudentId === 0">上一个学生</i-button>
        <i-button icon="arrow-down-a" @click="handleDown" :disabled="downStudentId === 0">下一个学生</i-button>
      </i-col>
    </i-row>
    <i-row>
      <i-col span="24">
        <i-carousel v-model="previewModel" @on-change="changeWork">
          <i-carousel-item v-for="pw in previewWorks" :key="pw.id">
            <div align="center">
              <img :src="host + '/' + pw.object + '?x-oss-process=style/preview'" style="width:50%;">
            </div>
          </i-carousel-item>
        </i-carousel>
      </i-col>
    </i-row>
  </div>
</template>

<script>
import common from "@/common";

export default {
  name: "work-preview",
  data: function() {
    return {
      previewModel: 0,
      previewDate: new Date(),
      previewOriginImage: "",
      studentIndex: 0,
      upStudentIndex: 0,
      downStudentIndex: 0,
      upPreviewModel: 0,
      downPreviewModel: 0,
      allWorks: [],
      host: "",
      week: "",
      num: "",
      shift: ""
    };
  },
  created() {
    this.week = common.getQueryString("week");
    this.num = common.getQueryString("num");
    this.shift = common.getQueryString("shift");

    const studentId = common.getQueryString("sid");
    const currentDate = common.getQueryString("cd");

    this.previewDate = new Date(currentDate);

    this.axios
      .get("/works/preview/" + this.week + "/num/" + this.num)
      .then(response => {
        if (response.code === 0) {
          this.allWorks = response.data;

          for (let i = 0; i < this.allWorks.length; i++) {
            if (this.allWorks[i].student.id === parseInt(studentId)) {
              this.studentIndex = i;
              this.host = this.allWorks[i].oss.host;

              for (let j = 0; j < this.previewWorks.length; j++) {
                const cd = new Date(this.previewWorks[j].courseDate);
                if (common.isSameDay(cd, this.previewDate)) {
                  this.previewModel = j;
                  this.previewDate = cd;
                  break;
                }
              }
              break;
            }
          }
        } else {
          this.$Message.error("获取学生作品预览信息失败。" + response.message);
        }
      });
  },
  computed: {
    previewStudent() {
      if (this.allWorks[this.studentIndex]) {
        return this.allWorks[this.studentIndex].student;
      }
      return {};
    },
    previewWorks() {
      if (this.allWorks[this.studentIndex]) {
        return this.allWorks[this.studentIndex].workList;
      }
      return [];
    },
    upStudentId() {
      for (let i = this.studentIndex - 1; i >= 0; i--) {
        const works = this.allWorks[i].workList;
        for (let j = 0; j < works.length; j++) {
          const cd = new Date(works[j].courseDate);
          if (common.isSameDay(cd, this.previewDate)) {
            // TODO: remove side-effect
            // this.upStudentIndex = i;
            // this.upPreviewModel = j;
            return this.allWorks[i].student.id;
          }
        }
      }
      return 0;
    },
    downStudentId() {
      for (let i = this.studentIndex + 1; i < this.allWorks.length; i++) {
        const works = this.allWorks[i].workList;
        for (let j = 0; j < works.length; j++) {
          const cd = new Date(works[j].courseDate);
          if (common.isSameDay(cd, this.previewDate)) {
            // TODO: remove side-effect
            // this.downStudentIndex = i;
            // this.downPreviewModel = j;
            return this.allWorks[i].student.id;
          }
        }
      }
      return 0;
    },
    previewDateString() {
      return common.formatStandardDate(this.previewDate, "-");
    }
  },
  methods: {
    handleUp() {
      // FIXME: -> upStudentId
      let found = false;
      for (let i = this.studentIndex - 1; i >= 0; i--) {
        const works = this.allWorks[i].workList;
        if (!found) {
          for (let j = 0; j < works.length; j++) {
            const cd = new Date(works[j].courseDate);
            if (common.isSameDay(cd, this.previewDate)) {
              this.upStudentIndex = i;
              this.upPreviewModel = j;
              found = true;
            }
          }
        }
      }

      this.studentIndex = this.upStudentIndex;
      this.previewModel = this.upPreviewModel;
    },
    handleDown() {
      // FIXME: -> downStudentId
      let found = false;
      for (let i = this.studentIndex + 1; i < this.allWorks.length; i++) {
        const works = this.allWorks[i].workList;
        if (!found) {
          for (let j = 0; j < works.length; j++) {
            const cd = new Date(works[j].courseDate);
            if (common.isSameDay(cd, this.previewDate)) {
              this.downStudentIndex = i;
              this.downPreviewModel = j;
              found = true;
            }
          }
        }
      }

      this.studentIndex = this.downStudentIndex;
      this.previewModel = this.downPreviewModel;
    },
    changeWork(oldValue, value) {
      this.previewDate = new Date(this.previewWorks[value].courseDate);
      this.previewOriginImage =
        this.host + "/" + this.previewWorks[value].object;
    },
    backToWorks() {
      this.$router.push(
        "/home/works?sw=" +
          this.week +
          "&sn=" +
          this.num +
          "&shift=" +
          this.shift
      );
    }
  }
};
</script>
